<template>
    <div class="container-list">
        <div style="width: 300px;float: right;margin-bottom: 10px;">
            <MultipleBoxNumbersDialog v-model="param.containerNo"  @change="blur" @confirm="confirm"/>
        </div>
        
        <el-table :data="tableData" border @selection-change="handleSelectionChange" style="width: 100%" align="center">
            <el-table-column type="selection" width="50" />
            <el-table-column prop="containerNo" label="箱号" width="150" align="center"/>
            <el-table-column prop="boxType" label="箱型" width="100" align="center"> 
                <template #default="scope">
                    {{ formatBoxType(scope.row.boxType) }} 
                </template>
            </el-table-column>
            <el-table-column prop="boxCondition" label="箱况" width="100" align="center">
                <template #default="scope">
                    {{ formatBoxCondition(scope.row.boxCondition) }} 
                </template>
            </el-table-column>
            <el-table-column prop="inDays" label="堆存天数"  align="center" />
        </el-table>
        <el-pagination class="floatRight" :page-size="param.pageSize" :pager-count="2" layout="prev, pager, next" :total="boxTotal" @current-change="currentChange"/>
        <div style="height: 40px;margin-top: 50px;">
            <el-button type="primary" style="float:right;"  @click="selectBoxList">确定</el-button>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { onMounted, ref, inject,watch } from 'vue'
import MultipleBoxNumbersDialog from '@/components/dialog/multipleBoxNumbersDialog'
import { formatDate, formatBoxType, formatBoxCondition } from '@/utils'
import {formatContainerNo} from '@/utils/mlpBox' // 格式化箱号
import { getTable } from '@/api/boxManage/index'

const emit = defineEmits(['selectedContainer'])

const props = defineProps({
    boxEastYardId: { // 堆场id 查询所属堆场下的箱号
        type: String,
        default: ''
    },
    boxInfo: { 
        type: Object,
        default: () => ({
            boxType:'',
            boxCondition:''
        })
    }
})
const param = ref({
    containerNo:"",
    boxType:"",
    boxCondition:"",
    pageNum:1,
    pageSize:15
})
const tableData = ref([])
onMounted(() => { 
    getContainerList()
})
// 根据输入箱号 查询集装箱列表
const queryContainer = () => {
    getContainerList()  
}
watch(() => props.boxEastYardId, () => {
    getContainerList()
})


const blur = (val) => {
    getContainerList()
}
const confirm = (val) => {
    getContainerList()
}


//查询集装箱列表
const boxTotal = ref(0)
const getContainerList = () => {
    const { container, containerList } = formatContainerNo(param.value.containerNo);
    let requestInfo = {
        pageNum: param.value.pageNum,
        pageSize: param.value.pageSize,
        statusList:[5],
        containerNo: container,
        containerNos: containerList,
        boxType:props.boxInfo.boxType || "",
        boxCondition:props.boxInfo.boxCondition || "",
        boxEastYardId: props.boxEastYardId,
        sortBeans: [{ "field": "inDays", "isAsc": "desc" }] // desc 降序  asc 升序
    } 
    getTable(requestInfo).then(res => {
        tableData.value = res.data.list
        boxTotal.value = res.data.total
    })
}

const containerInfo = ref([])
const handleSelectionChange = (val) => {
    containerInfo.value = val
}

const selectBoxList = () => {
    emit('selectedContainer',containerInfo.value,)
}

//下一页
// const nextClick = (val:number) => {
//    param.value.pageNum = val
//    getContainerList()
// }
// //上一页
// const prevClick = (val:number) => {
//    param.value.pageNum = val
//    getContainerList()
// }
// 点击页码
const currentChange = (val:number) => { 
    param.value.pageNum = val
   getContainerList()
}


</script>
<style lang="scss" scoped></style>